<template>
  <div>
    <el-form
      ref="form"
      :model="creditForm"
      @submit.native.prevent
    >
      <el-row :gutter="gutter">
        <el-col :span="span">
          <el-form-item prop="itemType">
            <el-select v-model="creditForm.itemType" clearable placeholder="请选择名目" value="" :style="style">
              <el-option v-for="(name, index) in nameList" :key="index" :label="name.label" :value="name.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="businessNo">
            <el-input v-model.trim="creditForm.businessNo" clearable placeholder="请输入发货申请单号/回款单号/单据号" />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item prop="dateArr">
            <el-date-picker
              v-model="creditForm.dateArr"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              clearable
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-button type="primary" @click="searchTableData">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <BaseTable
      ref="creditTable"
      :table-data="tableData"
      :table-list="tableList"
      :loading="creditLoading"
      show-index
      :total="creditTotal"
      show-pagination
      @pagination="paginationHandle"
    />
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import { creditBackFlow } from '@/service/accountManage'
import { formatTime, formatMoneyAmount, getDictionaryLabel } from '@/utils/tools'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Credit',
  components: {
    BaseTable
  },
  props: {
    nameList: {
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      creditForm: {
        itemType: '',
        businessNo: '',
        dateArr: []
      },
      tableData: [],
      creditTotal: 0,
      pageSize: 10,
      pageNum: 1,
      tableList: [
        {
          label: '时间',
          prop: 'createTime',
          width: '134px',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '账户',
          prop: 'type',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = row[prop] === 1 ? '公司授信' : '中信保授信'
            return <span>{text}</span>
          }
        },
        {
          label: '变更源',
          prop: 'changeSource',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.credit_change_source)
            return <span>{ text }</span>
          }
        },
        {
          label: '原剩余额度（美元）',
          prop: 'beforeAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatMoneyAmount(row[prop])
            return <span>{text}</span>
          }
        },
        {
          label: '名目',
          prop: 'itemType',
          render: (node, data) => {
            const { row, column: { prop }} = data
            const text = this.getName(row[prop])
            return <span>{{ text }}</span>
          }
        },
        {
          label: '本次变更金额（美元）',
          prop: 'changeAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatMoneyAmount(row[prop])
            return <span>{text}</span>
          }
        },
        {
          label: '变更后金额（美元）',
          prop: 'afterAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = formatMoneyAmount(row[prop])
            return <span>{text}</span>
          }
        },
        {
          label: '单据号',
          prop: 'businessNo'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      style: {
        width: '100%'
      },
      gutter: 12,
      span: 6,
      creditLoading: false
    }
  },
  computed: {
    ...mapState({
      credit_change_source: state => state.base.credit_change_source
    }),
    companyId() {
      return this.$route.params.id
    }
  },
  mounted() {
    this.getDictionary()
    this.getTableData()
  },
  methods: {
    ...mapActions({
      getBaseDataList: 'base/getBaseDataList'
    }),
    getDictionary() {
      this.getBaseDataList({ type: 'credit_change_source' })
    },
    getName(nameValue) {
      nameValue = parseInt(nameValue)
      const item = this.nameList.filter(item => +item.value === nameValue)[0]
      return item ? item.label : '-'
    },
    paginationHandle(data) {
      const { pageIndex, pageSize } = data
      this.pageSize = pageSize
      this.pageNum = pageIndex
      this.getTableData()
    },
    async getTableData() {
      this.creditLoading = true
      let { dateArr } = this.creditForm
      dateArr = dateArr || []
      let [startTime, endTime] = dateArr
      startTime = startTime || ''
      endTime = endTime || ''
      const { pageSize, pageNum, companyId } = this
      const param = {
        ...this.creditForm,
        startTime,
        endTime,
        pageNum,
        pageSize,
        companyId
      }
      const { records, total } = await creditBackFlow(param).finally(() => {
        this.creditLoading = false
      })
      this.creditTotal = total
      this.tableData = records || []
    },
    searchTableData() {
      this.pageSize = 10
      this.pageNum = 1
      this.$refs.creditTable.pageIndex = 1
      this.$refs.creditTable.pageSize = 10
      this.getTableData()
    }
  }
}
</script>

<style></style>
